$form-control-input-placeholder-color: $aui-brand-gray;
$form-control-input-disabled-bg: $aui-brand-light-gray;
$form-control-input-border: 1px solid $aui-brand-gray;
$form-control-input-focus-border-color: $aui-brand-info;
$form-control-input-radius: $aui-border-radius;

$__AUI_FORM_CONTTROL_SELECTOR: ".#{$aui-ns}-form-control";

/// use to create a form-control mixin
@mixin aui-form-mixin-form-control() {
    display: block;    
    box-sizing: border-box;
    border-radius: $form-control-input-radius;    
    background-image: none;
    background-clip: padding-box;
    border: $form-control-input-border;

    // Placeholder
    &::placeholder {
        color: $form-control-input-placeholder-color;
        opacity: 1;
    }

    // Disabled and read-only inputs
    //
    // HTML5 says that controls under a fieldset > legend:first-child won't be
    // disabled if the fieldset is disabled. Due to implementation difficulty, we
    // don't honor that edge case; we style them as disabled anyway.
    &:disabled,
    &[readonly] {
        background-color: $form-control-input-disabled-bg;
        opacity: 1;
    }

    &:focus {
        outline: none;
        border-color: $form-control-input-focus-border-color;
    }
}

/// use to create a .form-control class
@mixin aui-form-create-form-control($selector: $__AUI_FORM_CONTTROL_SELECTOR) {
    #{$selector} {
       @include aui-form-mixin-form-control();
    }
}

@mixin aui-form-use-form-control-selector() {
    #{$__AUI_FORM_CONTTROL_SELECTOR} {
        @content;
    }
}

@include aui-vue-register-component("form-control", (sel: $__AUI_FORM_CONTTROL_SELECTOR));